<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!-- <link rel="stylesheet" href="css/public.css">
    <link rel="stylesheet" href="css/music.css">
    <link rel="stylesheet" href="css/iconfont.css">
    <link rel="stylesheet" href="css/icon.css"> -->
    <link rel="stylesheet" href="./m.css">
</head>
<body>
<!--音乐播放器-->
<div class="musicPlayer">
    <!--歌曲信息-->
    <div class="musicInfo">
        <!--歌曲图片-->
        <div class="musicImg" id="musicImg">
            <img src="img/1.jpg" id="musicpic">
        </div>
        <!--歌曲图片 end-->
        <!--歌曲名称-->
        <div class="musicName">
            <h1 id="sname">歌曲名称</h1>
            <h2 id="singer">歌手</h2>
        </div>
        <!--歌曲名称 end-->
    </div>
    <!--歌曲信息 end-->

    <!--快捷文字-->
    <div class="kj">
        <ul>
        <li><img id="aiXin" src="img/aixin1.png"><p>喜欢</p></li>
        <li><img id="shouCang" src="img/shoucang.png"><p>收藏</p></li>
        <li><img id="xiaZai" src="img/xiazai.png"><p>下载</p></li>
        <li><img id="fenXiang" src="img/fenxiang.png"><p>分享</p></li>
        </ul>
    </div>

    <!--快捷文字 end-->

    <!--进度条-->
    <div class="jdt">
        <span class="jdt-left time" id="jdtLeft">00:00</span>
        <span class="jdt-right time" id="jdtRight">00:00</span>
        <div class="clears"></div>

        <div class="jdt_1" id="gequJDBar">
            <div class="jdt_color" id="gequjd">
            </div>
        </div>
        <!--进度条 end-->
        <!--控制按钮-->
        <div class="ctrls" id="ctrls">
            <button class="preBtn" id="preBtn" type="button"><img src="img/pre.png"></button>
            <button class="playBtn" id="playBtn" type="button"><span class='icon iconfont icon-zanting'></span></button>
            <button class="nextBtn" id="nextBtn" type="button"><img src="img/next.png"></button>
            <!--音量控制-->
            <div class="vol" id="volJd">
                <img src="img/yinliang.png">
                <div class="vol_color" id="volColor"></div>
                <div class="vol_blok" id="volBlok"></div>
            </div>
            <!--音量控制 end-->
            <!--音量显示百分比-->
            <div class="text" id="text">
                100%
            </div>
            <!--音量显示百分比  end-->
        </div>
        <!--控制按钮 end-->
    </div>

    <audio src="#" id="music"></audio>
</div>
<!--音乐播放器 end-->
<script src="./m.js"></script>
</body>
</html>